<!DOCTYPE html>
<html>
<head>
    <title>data linkage</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="./vendor/avalon/avalon.js" ></script>
    <style>
    </style>
    <script type="text/javascript">

        avalon.define({
            $id: "fruit",
            options: ["苹果", "香蕉", "桃子", "雪梨", "葡萄", "哈蜜瓜", "橙子", "火龙果", "荔技", "黄皮"],
            selected: "桃子"
        })
 


        var map = {
            "中国": ["江南四大才子", "初唐四杰", "战国四君子"],
            "日本": ["日本武将", "日本城堡", "幕府时代"],
            "欧美": ["三大骑士团", "三大魔幻小说", "七大奇迹"],
            "江南四大才子": ["祝枝山", "文征明", "唐伯虎", "周文宾"],
            "初唐四杰": ["王勃", "杨炯", "卢照邻", "骆宾王"],
            "战国四君子": ["楚国春申君黄歇", "齐国孟尝君田文", "赵国平原君赵胜", "魏国信陵君魏无忌"],
            "日本武将": ["织田信长", "德川家康", "丰臣秀吉"],
            "日本城堡": ["安土城", "熊本城", "大坂城", "姬路城"],
            "幕府时代": ["镰仓", "室町", "丰臣", "江户"],
            "三大骑士团": ["圣殿骑士团", "医院骑士团", "条顿骑士团"],
            "三大魔幻小说": ["冰与火之歌", "时光之轮", "荆刺与白骨之王国"],
            "七大奇迹": ["埃及胡夫金字塔", "奥林匹亚宙斯巨像", "阿尔忒弥斯月神殿", "摩索拉斯陵墓", "亚历山大港灯塔", "巴比伦空中花园", "罗德岛太阳神巨像"]
        }

        avalon.define("linkage", function(vm) {
            vm.first = ["中国", "日本", "欧美"]
            vm.second = map[vm.first[1]].concat()
            vm.third = map[vm.second[0]].concat()
            vm.firstSelected = "日本"
            vm.secondSelected = "日本武将"
            vm.thirdSelected = "织田信长"

            vm.$watch("firstSelected", function(a) {
                vm.second = map[a].concat()
                vm.secondSelected = vm.second[0]
            })
            vm.$watch("secondSelected", function(a) {
                vm.third = map[a].concat()
                vm.thirdSelected = vm.third[0]
            })
        })

    </script>
        
</head>
<body>

    <div ms-controller="fruit">
        <h3>文本域与下拉框的联动</h3>
        <input  ms-duplex="selected" />
        <select ms-duplex="selected" >
            <option ms-repeat-option="options" ms-value="option" >{{option}}</option>
        </select>
    </div>
  


    <div ms-controller="linkage">
        <h3>下拉框三级联动</h3>
        <select ms-duplex="firstSelected" >
            <option  ms-repeat="first" ms-value="el" >{{el}}</option>
        </select>
        <select ms-duplex="secondSelected" >
            <option ms-repeat="second" ms-value="el" >{{el}}</option>
        </select>
        <select ms-duplex="thirdSelected" >
            <option ms-repeat="third" ms-value="el" >{{el}}</option>
        </select>
    </div>


</body>
</html>
